<template>
  <div class="enter-warppers">
    <div class="phone_box">
      <p class="phone_input">
        <input type="tel" v-model="userPhone" placeholder="请输入手机号" maxlength="11" />
      </p>
      <p class="code_input">
        <input type="tel" v-model="code" placeholder="请输入短信验证码" maxlength="6" />
        <span class="get-code-button" @click="getcodeBtn">
          <em>{{codeText}}</em>
        </span>
      </p>
      <p class="phone_btn" @click="fillInfo">立刻注册拿奖励</p>
      <p class="next_page" @click="signRule">
        <img src="@/assets/imgs/next_page_icon@2x.png" />
      </p>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '司机招募',
      userPhone: '',
      code: '',
      codeText: '获取验证码',
      countingDown: '',
      intervalId: '',
      sec: 60
    };
  },
  mounted() {
    try {
      this.setHeader(this.title);
    } catch (e) {
      console.log(e);
    }
  },
  methods: {
    signRule() {
      this.$router.push({
        name: 'DriverAttention',
        query: {
          haveCar: this.$route.query.haveCar,
          isCity: this.$route.query.isCity,
          phone: this.userPhone,
          code: this.code,
          cate: this.$route.query.cate
        }
      });
    },
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os == 'Linux' || os == 'Android') && handler) {
        //  handler.setTopText(JSON.stringify(text));
      } else if ((os == 'iOS' || os == 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    // 获取验证码
    getCode(type) {
      if (!this.userPhone) {
        Toast({
          content: '手机号码不能为空',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.userPhone)) {
        Toast({
          content: '手机号码格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      var data = {
        user_phone: encryptByDESModeEBC(this.userPhone)
      };
      Loading.show();
      http.post('pakj/common/getMobileCode', data).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          Toast({
            content: '验证码已发送',
            duration: 3000,
            hasMask: true
          });
          if (type === true) {
            this.countdown();
          }
        } else if (res.data.code === '404405') {
          // 未使用短信
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定',
            onConfirm: () => {}
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    countdown() {
      this.intervalId = setInterval(() => {
        this.countingDown = true;
        this.codeText = this.sec + '秒后重试';
        this.sec = this.sec - 1;
        if (this.sec < 0) {
          clearInterval(this.intervalId);
          this.codeText = '获取验证码';
          this.countingDown = false;
          this.sec = 60;
        }
      }, 1000);
    },
    // 重新获取
    getcodeBtn() {
      if (this.countingDown === true) {
        return false;
      }
      this.getCode(true);
    },
    fillInfo() {
      sessionStorage.clear();
      if (!this.userPhone) {
        Toast({
          content: '手机号码不能为空',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.userPhone)) {
        Toast({
          content: '手机号码格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.code) {
        Toast({
          content: '验证码不能为空',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!/^\d{6}$/.test(this.code)) {
        Toast({
          content: '请输入6位验证码',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      localStorage.setItem('drive_phone', this.userPhone);
      var data = {
        user_phone: encryptByDESModeEBC(this.userPhone),
        mobileCode: this.code
      };
      Loading.show();
      http.post('pakj/driver/auditResults', data).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          localStorage.setItem('tk', res.data.data.token);
          if (!res.data.data.status) {
            //  未注册
            window.location.href =
              '/intercitydriver/fillInfo?haveCar=' +
              this.$route.query.haveCar +
              '&isCity=' +
              this.$route.query.isCity +
              '&cate=' +
              this.$route.query.cate;
            // this.$router.push({
            //     path: 'fillInfo',
            //     query: {
            //         haveCar: this.$route.query.haveCar,
            //         isCity: this.$route.query.isCity,
            //         cate: this.$route.query.cate
            //     }
            // });
          } else if (res.data.data.status === '0') {
            // 注册中
            this.$router.push({
              name: 'recruitwait'
            });
          } else if (res.data.data.status === '1') {
            // 注册成功
            this.$router.push({
              name: 'recruitsuccess'
            });
          } else if (res.data.data.status === '2') {
            // 注册失败
            let error = JSON.stringify(res.data.data.driverRecruitInfo);
            sessionStorage.setItem('errMsg', error);
            this.$router.push({
              name: 'recruitfalse',
              query: {
                haveCar: this.$route.query.haveCar,
                isCity: this.$route.query.isCity,
                cate: this.$route.query.cate
              }
            });
          } else if (res.data.data.status === '3') {
            // 已是用户
            Dialog.alert({
              title: '提示',
              content: '您已成功注册',
              confirmText: '确定',
              onConfirm: () => {
                this.$router.push({
                  name: 'enterpage'
                });
              }
            });
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.enter-warppers {
  width: 100%;
  height: 100vh;
  background: url('../../assets/imgs/jiangli_bg.png') no-repeat top center;
  background-size: cover;
}

.phone_box {
  position: absolute;
  top: 55%;
  width: 80%;
  margin: 0px 10%;
}

.phone_box input {
  height: 80px;
  line-height: 40px;
  width: 100%;
  border: none;
  padding-left: 10px;
  outline: none;
  font-size: 32px;
  display: inline-block;
}

.code_input {
  position: relative;
  margin-top: 20px;
}

.get-code-button {
  font-size: 24px;
  display: inline-block;
  text-align: center;
  color: #ff6917;
  position: absolute;
  right: 10px;
  bottom: 0px;
  border-left: solid 1px #ccc;
  height: 85px;
  line-height: 85px;
}

.get-code-button em {
  font-style: normal;
  margin-left: 10px;
}

.phone_btn {
  height: 88px;
  line-height: 88px;
  font-size: 36px;
  color: #fff;
  background-color: #ff6917;
  width: 100%;
  text-align: center;
  border-radius: 7px;
  margin-top: 40px;
}

.next_page {
  text-align: center;
  margin-top: 20px;
}

.next_page img {
  width: 60px;
}
</style>

